<!-- 设置角色权限 -->
<div class="layuimini-main">

    <div class="layui-form layuimini-form" style="width:96%">
		
        <div class="layui-form-item">
            <label class="layui-form-label"> 角色名 </label>
            <div class="layui-input-block">
                <input type="text" class="layui-input layui-disabled" name="roleName" value="" />
			</div>
        </div>
		
        <div class="layui-form-item">
            <label class="layui-form-label"> 角色描述 </label>
            <div class="layui-input-block">
				<!-- 树目录 -->
				<div id="authorizationTree" style="background-color: #FBFBFB; border: 1px solid #eeeeee; padding:6px 6px 10px 6px;"></div>
                <!-- <label class="layui-form-label"></label> -->
				<!-- 保留代码 -->
				<!-- <div class="layui-btn-container">
				    <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">获取选中节点数据</button>
				    <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>
				    <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>
				</div> -->
            </div>
        </div>
		
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="authorizationBtn"> 授权 </button>
            </div>
        </div>
    </div>
</div>

<!-- <script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script> -->
<script>
    layui.use(['form', 'tree', 'util'], function () {
        var form = layui.form,
            layer = layui.layer,
			util = layui.util,
			tree = layui.tree,
            $ = layui.$;
		
		//初始化表单，要加上，不然刷新部分组件可能会不加载
		form.render();
		
		//初始化数据
		//1.调用方法请求json数据
		// var treeData = getTreeData();
		// console.log(treeData);
		
		
		//渲染tree树组件
		tree.render({
			elem: '#authorizationTree',
			data: getTreeData().data,			//tree数据
			showCheckbox: true,  	//是否显示复选框
			id: 'treeID'			//设定实例唯一索引，用于基础方法传参使用
		});
		
		//按钮事件(保留代码)
		// util.event('lay-demo', {
		// 	//如果是 lay-demo = getChecked 获取选中节点数据
		// 	getChecked: function(othis){
		// 		//获取 treeID 中选中节点的数据
		// 		var checkedData = tree.getChecked('treeID');
		// 		//获得所勾选项ID
		// 		var list = new Array();
		// 		list = getChecked_list(checkedData);
		// 		console.log(list);
		// 	},
			
			
		// 	//设置勾选指定节点（用于修改操作）
		// 	setChecked: function(){
		// 		tree.setChecked('treeID', [12, 16]); //勾选指定节点
				
		// 	},
			
			
		// 	//重载实例
		// 	reload: function(){
		// 		//重载实例
		// 		tree.reload('treeID', {});
		// 	}
		// });


		

        //监听授权按钮事件
        form.on('submit(authorizationBtn)', function (data) {
			//获得表单数据
			var formData = data.field;
			
			//获取 treeID 中选中节点的数据
			var checkedData = tree.getChecked('treeID');
			//获得所勾选项ID
			var list = new Array();
			list = getChecked_list(checkedData);
			console.log(list);

			//通过ajax请求提交
			$.ajax({
				url : 'http://localhost:8006/sccRoleMenu',
				type: 'post',
				data: {'ids':list,'roleId':localStorage.getItem('roleId')}
			});
			// 关闭弹出层
			layer.close(layer.index);
            return false;
        });
    });
	
	
	
	//获得tree的数据
	function getTreeData(){
		var tData = [];
	    $.ajax({
	        url: "http://localhost:8006/sccMenu/setRole/"+localStorage.getItem('roleId'),    //后台数据请求地址
			// url:'./api/test.json',
	        type: "get",
	        async: false,	//同步加载数据，不要设置成异步，否则加载tree之前没获取到数据
			contentType: "application/json",
			dataType: 'json',				//WebService 会返回Json类型  
	        success: function(result){
				console.log(result);
				//注：不能直接在ajax中return数据，这表明只是ajax返回了，并非是function函数返回了
	            tData = result;
	        }
	    });
		return tData;
	}
	

	//获取tree中所有选中节点的id
	function getChecked_list(data) {
		var ids = "";
		$.each(data, function (index, item) {
			if (ids != "") {
				ids = ids + "," + item.id;
			}
			else {
				ids = item.id;
			}
			//递归查找
			var i = getChecked_list(item.children);
			if (i != "") {
				ids = ids + "," + i;
			}
		});
		return ids;
	}
</script>